<template>
  <div class="goods">
    <div class="goods-box">
      <pie-simple
        name="countProductType"
        :data="countProductType"
        :extend="{
          title: '商品分类销量',
          legend: true,
          radius: ['40%', '60%'],
        }"
      />
      <span v-if="count > 0">{{ count }}单<br /><em>总单数</em></span>
    </div>
    <div class="goods-box">
      <bar-gradient
        name="countProductColumn"
        :data="countProductColumn"
        :extend="{ title: '单商品销量', label: true }"
      />
    </div>
  </div>
</template>
<script>
import pieSimple from '@c/echarts/pie-simple'
import barGradient from '@c/echarts/bar-gradient'
export default {
  components: {
    pieSimple,
    barGradient,
  },
  data() {
    return {
      countProductType: [],
      count: 0,
      countProductColumn: {
        categories: [],
        series: [],
      },
    }
  },
  created() {
    this.countProductTypeList()
    this.countProductColumnList()
  },
  methods: {
    countProductTypeList() {
      this.$axios.get('/count/bigscreent4/countProductType').then((data) => {
        this.countProductType = []
        this.count = 0
        if (data.code == 200) {
          this.count = data.data.count
          this.countProductType = data.data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countProductColumnList() {
      this.$axios.get('/count/bigscreent4/countProductColumn').then((data) => {
        this.countProductColumn = { categories: [], series: [] }
        if (data.code == 200) {
          const categories = [],
            series = []
          data.data.forEach((element) => {
            categories.push(element.name)
            series.push(element.value)
          })
          this.countProductColumn = {
            categories: categories,
            series: [
              {
                name: '单商品销量',
                data: series,
              },
            ],
          }
        } else {
          this.$message.error(data.msg)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.goods {
  display: flex;
  &-box {
    width: 50%;
    position: relative;
    span {
      position: absolute;
      left: 50%;
      top: 55%;
      transform: translate(-50%, -50%);
      text-align: center;
      em {
        font-size: 12px;
        color: #b1b1b1;
      }
    }
  }
}
</style>
